{% load cms_tags %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{ lang }}" xml:lang="{{ lang }}" >
<head>
<title>{% page_attribute page_title %}</title>
<meta name="description" content="{% page_attribute meta_description %}"/>
<meta name="keywords" content="{% page_attribute meta_keywords %}"/>

<script type="text/javascript" src="/site_media/media/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/site_media/media/js/jquery.easing.js"></script>
<script type="text/javascript" src="/site_media/media/js/jquery.lavalamp.js"></script>
<script type="text/javascript" src="/site_media/media/js/jquery.infinitecarousel.js"></script>


<script type="text/javascript">
           $(function() {
            $("#1").lavaLamp({
                fx: "backout", 
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
	    $('#carousel').infiniteCarousel({
		    displayTime: 6000,
		    textholderHeight : .25
	});
        });
</script>

<style>
    .placeholder-editable {
        border:1px #bbb solid;
        background:#fff;
        min-height:1em;
        padding:5px;
        cursor:text;
        overflow:hidden;
        height:1%;
    }

    .placeholder-editable input {
        float:right;
        padding:4px 10px;
        margin-top:3px;
    }

    .placeholder-over, .edit {
        border:1px #999 solid;
        background:#5c705c;
        color:#fff;
        cursor: hand;
    }

    .edit {
        padding:5px;
    }

    body {
        font-family:sans-serif;
        font-size:75%;
        background:#b5b185;
        color:#333;
    }

    #main {
        width:600px;
        padding:20px;
        margin:0 auto;
        border:1px #999 solid;
        margin-bottom:40px;
        overflow:hidden;
        height:1%;
        background:#fffdca;
    }

    h1, h2 {
        border-bottom:1px #ddd solid;
        color:#a4b854;
    }

    a {
        color:#ff7959
    }
	
	ul.breadcrumb {
		clear:left;
		padding-bottom:30px;
		margin-left:-40px;
	}
	ul.breadcrumb li{
		float:left;
		margin-left:5px;
		list-style:none;
		}
	p.chooser a{
		text-decoration: none;
	}	
	p.chooser a.current {
		text-decoration: underline;
	}

/* Styles for the entire LavaLamp menu */
.lavaLamp {
    position: relative;
    height: 29px; width: 421px;
    background: url("/site_media/media/img/bg.gif") no-repeat top;
    padding: 15px; margin: 10px 0;
    overflow: hidden;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background: url("/site_media/media/img/lava.gif") no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: url("/site_media/media/img/lava.gif") no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

#carousel {
	margin: 0 auto;
	width: 400px;
	height: 390px;
	padding: 0;
	overflow: scroll;
	border: 2px solid #999;
}
#carousel ul {
	list-style: none;
	width: 1500px;
	margin: 0;
	padding: 0;
	position: relative;
}
#carousel li {
	display: inline;
	float: left;
}
.textholder {
	text-align: left;
	font-size: small;
	padding: 6px;
	-moz-border-radius: 6px 6px 0 0;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
}


</style>
</head>
<body>

<div id="main">
<p style="float:right">
    {% if user.is_authenticated %}
        <a href="/admin/logout/">log out</a>
    {% else %}
        <a href="/admin/">log in</a>
    {% endif %}
</p>

    <ul class="lavaLamp" id="1">
            <li><a href="/">Home</a></li>
            <li><a href="/donde/">Donde</a></li>
            <li><a href="/contacto/">Contacto</a></li>
        </ul>

<div id="carousel">
	<ul>
		<li><img alt="" src="/site_media/media/img/p1.jpg" width="500" height="213" /><p>Hi there. I&#39;m 
		a caption for this image. If you click the pause icon in the upper right 
		hand corner you can pause the slideshow and restart it whenever you like.</p>
		</li>
		<li><img alt="" src="/site_media/media/img/p2.jpg" width="500" height="213" /><p>This is the caption 
		for the second image. The image to the right has no caption. clicking the 
		left and right arrows will also pause the show.</p>
		</li>
		<li><img alt="" src="/site_media/media/img/p3.jpg" width="500" height="213" /></li>
	</ul>
</div>


<p class="chooser">
	See this page in: {% language_chooser %}
</p>

<h1>{% block title %}{% page_attribute title %}{% endblock %}</h1>

<h3>site: {{ site.name }}</h3>


<h2>Navigation with only 1 active extra level</h2>
<ul>
	{% show_menu 0 100 0 1 %}
</ul>



<h2>Show the breadcrumb navigation of the current page</h2>
<ul class="breadcrumb">
{% page_attribute title %}
	{#% show_breadcrumb %#}
</ul>

<h2>Content</h2>
{% block content %}
    <div style="width:70%">
		<h3>title placeholder {% page_attribute title %}</h3>
		<div style="float:right;width:25%">
    		<h3>Right column placeholder</h3>
    		{% placeholder right-column %}
    	 </div>
        <div>
        	<h3>body placeholder</h3>
         	{% placeholder "body" %}
         </div>
    </div>
{% endblock %}

</div>

<script type="text/javascript">
    // quick and dirty edit in place example
    {% if has_change_permissions %}
        $('.placeholder').addClass('placeholder-editable');
    {% endif %}
    $('.placeholder-editable').mouseover(function() {
        $(this).addClass('placeholder-over');
    });
    $('.placeholder-editable').mouseout(function() {
        $(this).removeClass('placeholder-over');
    });
    $('.placeholder-editable').click(function() {
        var p = $(this);
        if(p.hasClass('edit')) {
            return false;
        }
        p.addClass('edit');
        var height = p.height()+20;
        var width = p.width()-10;
        p.html('<textarea style="width:'+width+'px;height:'+height+'px">'+ this.innerHTML +'</textarea><input type="submit" value="Save" />');
        $('input', p).click( function() {
            var content = $('textarea', p).val();
            $.post('/admin/cms/page/{{ current_page.id }}/modify-content/'+p.attr('id')+'/{{ lang }}/', {'content':content}, function(response) {
                if(response=="ok") {
                    p.html(content);
                    p.removeClass('edit');
                    p.removeClass('placeholder-over');
                } else {
                    alert("You need to authenticate to the admin to edit the content");
                }
            });
            return false;
        });
    });
</script>


</body>
</html>
